<template>
  <div id="allotMessageList">
    <top-bar></top-bar>
    <md-scroll-view class="container" :auto-reflow="true" :scrolling-x="false" :bouncing="false">
      <allot-item v-for="(item,index) in allotMessageList" :key="index" :info="item"></allot-item>
    </md-scroll-view>
  </div>
</template>
<script>
import TopBar from '@/components/TopBar';
import AllotMessageItem from './items/AllotMessageItem';
import { ScrollView } from 'mand-mobile';
import { mapGetters } from 'vuex';
export default {
  name: 'system-message-list',
  components: {
    [TopBar.name]: TopBar,
    [AllotMessageItem.name]: AllotMessageItem,
    [ScrollView.name]: ScrollView
  },
  created() {
    this.$store.dispatch('getAllotMessageList');
  },
  computed: {
    ...mapGetters(['allotMessageList'])
  }
};
</script>
<style lang="stylus" scoped>
#allotMessageList {
  background-color: color-primary-background;
  height: 100vh;

  .container {
    margin-top: 20px;
    background-color: transparent;
    height: calc(100vh - 108px);
  }
}
</style>
